<template>
	<view class="my-settel">
   <label class="radio">
     <radio :checked="radioState" color="#c00000" @click="chooseAllRadio"/><text>全选</text>
   </label>
   <view class="price">
     合计:<text>￥{{price}}</text>
   </view>
   <!-- sum -->
   <view class="sum" @click="settlement">
     结算({{total}})
   </view>
	</view>
</template>

<script>
  import { mapGetters, mapMutations, mapState } from 'vuex'
	export default {
		data() {
			return {
        seconds: 3, // 倒计时秒数
        timer: null // 定时器
			};
		},
    methods:{
      ...mapMutations('mcart', ['updataAllradio']),
      ...mapMutations('muser', ['updataRedirectInfo']),
      chooseAllRadio () { // 全选按钮状态改变
        this.updataAllradio(this.radioState)
      },
      settlement () { // 结算
       if (!this.checkState) return uni.$showMsg('请选择要结算的商品！')
       if (!this.address.provinceName) return uni.$showMsg('请选择收货地址！')
       // if (!this.token) return uni.$showMsg('请先登录！') 
       if (!this.userinfo.nickName) { // 未登录，跳转到登录页面
        this.showTips(this.seconds)
        return  this.timer = setInterval( _ => {
           this.seconds --
            if (this.seconds <= 0 ) {
              clearInterval(this.timer)
              this.seconds = 3 // 重置秒数
              return uni.switchTab({
                url: '/pages/my/my',
                success: () => { // 成功后的回调函数
                  this.updataRedirectInfo({
                    openType: 'switchTab', // 跳转的方式
                    from: '/pages/cart/cart' // 从哪个页面来的
                  })
                }
              })
            }
           this.showTips(this.seconds)
         }, 1000)
       }
       this.payOrder() // 创建订单
      },
      showTips(n) { // 展示到倒计时秒数
        uni.showToast({ 
          // 不展示任何图标
          icon: 'none',
          // 提示的消息
          title: '请登录后再结算！' + n + ' 秒后自动跳转到登录页',
          // 为页面添加透明遮罩，防止点击穿透
          mask: true,
          // 1.5 秒后自动消失
          duration: 1500
        })
      },
      async payOrder () { // 创建订单
        const orderInfo  = { // 请求数据对象
          order_price: 0.01 ,// 价格
          consignee_addr: this.address ,// 用户地址
          goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
        }
        // 发起请求
        const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
        // 拿到订单编号了
        const orderNumber = res.message.order_number
        // 发起预支付，
        const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
        if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
         // 拿到了预订单返回的数据
         const payInfo = res2.message.pay
         // 发起微信支付 requestPayment api
         console.log(uni.requestPayment(payInfo));
         const [err, succ] = await uni.requestPayment(payInfo) // 接受的返回值是一个数组
         if (err) return uni.$showMsg('订单未支付！')
         //  完成了支付，进一步查询支付的结果 需要拿着订单号去服务器查询
        const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber }) // 接受的返回值是一个对象
        if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
         uni.showToast({
             title: '支付完成！',
             icon: 'success'
           })
      }
    },
    computed: {
      ...mapGetters('mcart', ['total', 'price', 'radioState', 'checkState']),
      ...mapState('userAddress', ['address']),
      ...mapState('muser', ['token', 'redirectInfo', 'userinfo']),
      ...mapState('mcart', ['cart'])
    },
    // filters:{
    //   priceZero(val) {
    //     return Number(val).toFixed(2)
    //   }
    // }
	}
</script>

<style lang="scss">
.my-settel {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  z-index: 99999;
  background-color: #ffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
}
.price {
  text {
    color: #c00000;
  }
}
    .sum {
      height: 50px;
      min-width: 100px;
      background-color: #c00000;
      color: white;
      line-height: 50px;
      text-align: center;
      padding: 0 10px;
      margin-right: 10px;
  }
</style>
